<template>
  <div class="pageListWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">企业:</span>
                <span class="searchInputFont">
                <el-select  v-model="searchInfo.enterpriseNo" size="mini" @change="searchRowsInfo(true)" clearable placeholder="全部">
                      <el-option
                        v-for="item in this.$store.state.companyInfos"
                        :key="item.enterpriseNo+''"
                        :label="item.enterpriseName"
                        :value="item.enterpriseNo+''">
                      </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">备案类型:</span>
                <span class="searchInputFont">
                    <el-select v-model="searchInfo.putOnStatus" @change="searchRowsInfo(true)" size="mini" clearable placeholder="备案类型">
                       <el-option
                         v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
                        </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <!--<el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">指标编号:</span>
                <span class="searchInputFont">
                    <el-input clearable size="mini" v-model="searchInfo.batchNo" @change="searchRowsInfo(true)" auto-complete="off" placeholder="指标编号"></el-input>
                </span>
              </div>
            </el-col>-->
            <el-col :span="8">
              <div class="searchWrap">
                <span class="searchFont">备案时间:</span>
                <span class="searchInputFont">
                     <el-date-picker
                       style="width: 100%;"
                       v-model="value6"
                       type="daterange"
                       align="left"
                       @change="searchRowsInfo(true)"
                       placeholder="选择日期范围"
                       size="mini"
                       :picker-options="$store.state.pickerOptions2">
                      </el-date-picker>
                </span>
              </div>
            </el-col>

          </el-row>
        </div>
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">状态:</span>
                <span class="searchInputFont">
                 <el-select v-model="searchInfo.vehicleStatus" @change="searchRowsInfo(true)" size="mini" clearable placeholder="备案类型">
                     <el-option
                       v-for="item in options1"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
                      </el-option>
                  </el-select>
                </span>
              </div>
            </el-col>
            <!--<el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">备案批次:</span>
                <span class="searchInputFont">
                    <el-input clearable size="mini" v-model="searchInfo.batchNo" @change="searchRowsInfo(true)" auto-complete="off" placeholder="备案批次"></el-input>
                </span>
              </div>
            </el-col>-->
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">车辆编号:</span>
                <span class="searchInputFont">
                    <el-input clearable size="mini" v-model="searchInfo.vehicleNo" @change="searchRowsInfo(true)" auto-complete="off" placeholder="车辆编号"></el-input>
                </span>
              </div>
            </el-col>
            <div style="float: right;margin-right: 10px;">
              <el-button type="primary" size="mini" @click="exportEvent()" v-if="$store.state.btnMenuIds.indexOf(311)>-1" :loading="this.downloadIng">导出</el-button>
              <el-button type="primary" size="mini" @click="searchRowsInfo()">查询</el-button>
            </div>
          </el-row>
        </div>
      </div>
      <div class="tableContainer" style="top:122px;">
        <div class="tableInner" ref="tableInnerWrap">
          <el-table
            ref="multipleTable"
            :data="rows"
            stripe
            :height="tableHeight"
            style="width: 100%"
          >
            <!--<el-table-column
              prop="batchNo"
              label="备案批次"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop=""
              label="指标编号"
              show-overflow-tooltip>
            </el-table-column>-->
            <el-table-column
              prop="enterpriseName"
              label="企业"
            >
            </el-table-column>
            <el-table-column
              prop="vehicleType"
              label="车辆类型"
            >
              <template slot-scope="scope">
                {{scope.row.vehicleType==1?"自行车":"电动车"}}
              </template>
            </el-table-column>
            <el-table-column
              label="车辆编号"
              prop="vehicleNo"
              show-overflow-tooltip
            >

            </el-table-column>
            <el-table-column
              prop="eleLabel"
              label="电子标签"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="vehicleMac"
              label="车锁蓝牙"
              show-overflow-tooltip
            >
            </el-table-column>
            <!--<el-table-column
              prop="district"
              label="投放区域"
            >
            </el-table-column>-->
            <el-table-column
              prop="putOnTime"
              label="备案时间"
              width="145"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="putOnStatus"
              label="备案类型"
            >
              <template slot-scope="scope">
                {{scope.row.putOnStatus==0?"未备案":scope.row.putOnStatus==1?"已备案":"已回收"}}
              </template>
            </el-table-column>
            <el-table-column
              prop="vehicleStatus"
              label="状态"
            >
              <template slot-scope="scope">
                {{scope.row.vehicleStatus==1?"正常":scope.row.vehicleStatus==2?"故障":"报废"}}
              </template>
            </el-table-column>
            <el-table-column
              prop="factoryDate"
              label="出厂日期"
              width="145"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              prop="yearNumber"
              label="使用年限"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="Pagination" style="text-align: left;margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 30, 50, 100,200]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props:[],
    data(){
      return {
        rows: [],
        options: [{
          value: '0',
          label: '未备案'
        }, {
          value: '1',
          label: '已备案'
        }, {
          value: '2',
          label: '已回收'
        }],
        options1: [{
          value: '1',
          label: '正常'
        }, {
          value: '2',
          label: '故障'
        }, {
          value: '3',
          label: '报废'
        }],
        allRows: '',
        currentRow: null,
        offset: 0,
        limit: 8,
        count: 0,
        currentPage: 1,
        elecInfo: "",
        pageSize: 10,
        //以下为搜索
        value6: "",
        tableHeight:"200",
        searchInfo: {
          beginDate: "",
          endDate: "",
          enterpriseNo: "",
          putOnStatus: "",
          batchNo: "",
          vehicleNo: "",
          vehicleStatus: "",
        },
        downloadIng: false
      }
    },
    components: {

    },
    created(){
      this.searchRowsInfo()
    },
    mounted(){
      this.$nextTick(()=>{
        //表格滚动
        this.tableHeight=document.querySelector(".pageListWrap").clientHeight-202
      })
    },
    methods: {
      exportEvent(){
        if (this.value6&&this.value6[0] != null) {
          this.searchInfo.beginDate = this.dtime(this.value6[0]).format('YYYY-MM-DD 00:00:00')
          this.searchInfo.endDate = this.dtime(this.value6[1]).format('YYYY-MM-DD 23:59:59')
        } else {
          this.searchInfo.beginDate = ""
          this.searchInfo.endDate = ""
        }

        var data = {...this.searchInfo}, str = ''
        data.sign = this.makeSign(data)

        for(let key in data){
          str += key+'='+data[key]
          str += '&'
        }

        window.location.href = process.env.API_HOST + `/vehicle/exportBicycle?` + str;
        /*this.downloadIng = true
        this.axios.post(process.env.API_HOST + `/vehicle/exportBicycle`, {
          ...this.searchInfo
        }, {responseType: 'arraybuffer'}).then(response => {
          let a = document.createElement('a')
          let blob = new Blob([response.data])
          let blob = new Blob([response.data], {type: 'application/vnd.ms-excel'})
          a.setAttribute('href', URL.createObjectURL(blob))
          a.setAttribute('download', '数据导出.xls')
          a.click()          
          this.downloadIng = false
        }).catch(() => {
          this.downloadIng = false
        })*/
      },
      searchRowsInfo(val){
        val?this.currentPage=1:""
        if (this.value6&&this.value6[0] != null) {
          this.searchInfo.beginDate = this.dtime(this.value6[0]).format('YYYY-MM-DD 00:00:00')
          this.searchInfo.endDate = this.dtime(this.value6[1]).format('YYYY-MM-DD 23:59:59')
        } else {
          this.searchInfo.beginDate = ""
          this.searchInfo.endDate = ""
        }

        this.axios.post(process.env.API_HOST + `/vehicle/selectBicycleGrid`, {
          page: this.currentPage,
          rows: this.pageSize,
          ...this.searchInfo
        })
          .then(response => {
            const result = response.data
            if (result.code === 200) {
              this.rows = result.rows
              this.count = result.total
            }
          })
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.searchRowsInfo()
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.searchRowsInfo()
      },

    },
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" >
  @import "../../../common/stylus/mixin.styl"
  .pageListWrap
    page()

</style>
